<template>
  <div class="content">
    <div class="form">
      <el-form size="mini" :inline="true" :model="form" class="table-info">
        <el-form-item label="一级菜单">
          <el-select value="" placeholder="一级菜单">
            <el-option
              :disabled="true"
              v-for="(item, index) in addedMenu"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单">
          <el-input v-model="form.menu" placeholder="一级菜单"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="addMenu" size="small" type="primary">添加一级菜单</el-button>

        </el-form-item>
        <el-form-item  prop="tableName" label="表">
          <el-select @change="handleSelectTable" v-model="form.currentTable" placeholder="选择表">
            <el-option
              v-for="(item, index) in databaseTables"
              :key="index"
              :label="`${item.realTableName}(${item.desc})`"
              :value="item.realTableName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="goAddMenu" type="success" icon="el-icon-circle-plus">添加菜单视图</el-button>

        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        type="index"
      >
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tables"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button-group>
            <el-button @click="handleDelete(scope.row)" type="warning" size="mini">删除</el-button>
            <el-button @click="handleView(scope.row)" type="success" size="mini">预览</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="预览视图" :visible.sync="dialogTableVisible">
      <el-tabs>
        <el-tab-pane label="列表视图">
          <el-button-group class="buttong">
            <el-button v-show="isAdd" type="primary" icon="el-icon-plus">添加</el-button>
            <el-button v-show="isDelete" type="danger" icon="el-icon-delete">删除</el-button>
            <el-button type="warning" icon="el-icon-search">搜索</el-button>
            <el-button icon="el-icon-scissors">清空</el-button>
          </el-button-group>
          <el-form size="mini" :inline="true" class="list_view" >
            <el-form-item v-for="(item, index) in currentMenuView.likeProperty" :key="index" :label="currentMenuView.list.propertyMap[item]+ ':'">
              <el-input class="list_view_width"></el-input>
            </el-form-item>
          </el-form>
          <el-table
            :data="tableData_view"
            style="width: 100%"
            border
            stripe
          >
            <el-table-column
              type="selection"
            >
            </el-table-column>
            <el-table-column
              type="index"
              width="50">
            </el-table-column>
            <el-table-column
              v-for="(item, index) in tables_view"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :formatter="item.formatter"
            >
              <template slot-scope="scope">
                <el-image
                  v-if="item.image === 1"
                  style="width: 80px; height: 80px"
                  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                  :fit="'fit'"></el-image>
                <template v-else>
                  {{scope.row[item.prop]}}
                </template>

              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              min-width="120px"
            >
              <template slot-scope="scope">
                <el-button-group>
                  <el-button v-show="isEdit"
                             type="warning" icon="el-icon-edit"
                             size="mini"
                  ></el-button>
                  <el-button
                    v-if="isDelete"
                    @click="console.log(scope)"
                    type="danger" icon="el-icon-delete"
                    size="mini"
                  ></el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="表单视图">
          <div style="width: 400px">
            <el-form label-width="100px" label-position="left">
              <z-from v-for="(item, index) in formView" :key="index" img="img" :form="item" v-model="formViewModel"></z-from>
              <el-form-item>
                <el-button size="small" type="primary">增加</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import ZForm from '../../components/form/ZForm'
export default {
  name: 'List',
  components: {
    'z-from': ZForm
  },
  data () {
    return {
      dialogTableVisible: false,
      api: {
        tableList: this.$api.database.tableList,
        list: this.$api.menu.list
      },
      form: {
        menu: '',
        currentTable: ''
      },
      addedMenu: [],
      tables: [
        {
          prop: 'tableName',
          label: '表名'
        },
        {
          prop: 'oneLevelMenu',
          label: '一级菜单名称'
        },
        {
          prop: 'twoLevelMenu',
          label: '二级菜单名称'
        }
      ],
      databaseTables: [],
      tableData: [],
      currentMenuView: [],
      tables_view: [],
      tableData_view: [],
      formView: [],
      formViewModel: ''
    }
  },
  methods: {
    addMenu () {
      if (this.form.menu) {
        this.addedMenu.push(this.form.menu)
        this.$success('添加成功')
        this.form.menu = ''
      } else {
        this.$error('请输入一级菜单名')
      }
    },
    goAddMenu () {
      if (sessionStorage.table) {
        sessionStorage.twoLevelMenu = JSON.stringify(this.addedMenu)
        this.$router.push('/menu/add')
        return
      }
      this.$error('请选择一个表')
    },
    getTableList () {
      this.$httpf({ url: this.api.tableList }, data => {
        this.databaseTables = data.data.data.tables
      })
    },
    handleSelectTable () {
      const current = this.databaseTables.filter(e => e.realTableName === this.form.currentTable)[0]
      sessionStorage.table = JSON.stringify(current)
    },
    getMenuList () {
      this.$httpf({ url: this.api.list }, data => {
        if (data.data.data.list) {
          this.tableData = data.data.data.list
        }
      })
    },
    handleDelete () {

    },
    handleView (row) {
      this.dialogTableVisible = true
      this.currentMenuView = row
      this.initTables(row)
      this.initTableData(row)
      this.initFormView(row)
    },
    initTableData () {
      let tables = this.tables_view
      let tmp = {}
      for (let i = 0; i < tables.length; i++) {
        tmp[tables[i].prop] = 'test数据'
      }
      this.tableData_view = []
      this.tableData_view.push(tmp)
      this.tableData_view.push(tmp)
      console.log(this.tableData_view)
    },
    initTables (form) {
      const renturunResule = []
      let properties = form.list.properties
      let propertyMap = form.list.propertyMap
      let pictureProperty = form.pictureProperty
      for (let i = 0; i < properties.length; i++) {
        let tmp = { label: propertyMap[properties[i]], prop: properties[i] }
        if (pictureProperty === properties[i]) {
          tmp['image'] = 1
        }
        renturunResule.push(tmp)
      }
      this.tables_view = renturunResule
      console.log(this.tables_view)
    },
    initFormView (form) {
      const temp = {
        type: 'text',
        model: 'name',
        label: '商品名称',
        select: [
          { label: '正常', value: '正常' },
          { label: '异常', value: '异常' }
        ],
        rule: {
          message: '请输入商品名称'
        }
      }
      let properties = form.edit.properties
      let propertyFromMap = form.edit.propertyFromMap
      let propertyMessageMap = form.edit.propertyMessageMap
      let propertyMap = form.edit.propertyMap
      this.formView = []
      for (let i = 0; i < properties.length; i++) {
        temp.type = propertyFromMap[properties[i]]
        temp.rule.message = propertyMessageMap[properties[i]]
        temp.model = properties[i]
        temp.label = propertyMap[properties[i]]
        this.formView.push(JSON.parse(JSON.stringify(temp)))
      }
    }
  },
  computed: {
    isAdd () {
      if (this.currentMenuView.functions) {
        return this.currentMenuView.functions.add
      }
      return false
    },
    isDelete () {
      if (this.currentMenuView.functions) {
        return this.currentMenuView.functions.delete
      }
      return false
    },
    isEdit () {
      if (this.currentMenuView.functions) {
        return this.currentMenuView.functions.edit
      }
      return false
    }
  },
  created () {
    this.getTableList()
    this.form.currentTable = ''
    // if (sessionStorage.table) {
    //   this.form.currentTable = (JSON.parse(sessionStorage.table)).realTableName
    // }
    this.getMenuList()
  }
}
</script>

<style scoped>
  .content {
    padding: 20px 20px;
  }
  .form {
    margin: 10px;

    padding-top: 18px;
  }
  .table {
    padding: 10px;

  }
  .list_view {
    margin-top: 10px;
  }
  .list_view_width {
    width: 80px;
  }

</style>
